import { Component } from 'react';
import React from 'react';
import { Tag } from 'antd';
import { number } from 'prop-types';

interface KeywordFilterSearchProps {
  filters: Array<FilterKeywords>;
  setType: Function; //改变父级的课程状态
}

interface FilterKeywords {
  title: string;
  multiple?: boolean;
  keywords: Array<string>;
}
interface KeywordFilterSearchState {
  selected: { values?: Array<string>;[key: string]: Array<string> | undefined };
}
class KeywordFilterSpecial extends Component<KeywordFilterSearchProps, KeywordFilterSearchState> {

  constructor(props: any) {
    super(props);
    this.state = { selected: { "课程状态": ["全部"] } };
  }
  render() {
    const CheckableTag = Tag.CheckableTag;
    return (
      <div>
        {this.props.filters.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                margin: `12px 12px ${index + 1 == this.props.filters.length ? '12px' : '0px'}`,
              }}
            >
              <span style={{ marginRight: "12px" }}>{item.title}</span>
              {item.keywords.map((tag) => {
                const newLocal = this.state.selected[item.title]?.indexOf(tag);
                return (
                  <CheckableTag
                    key={tag}
                    checked={newLocal != undefined ? newLocal >= 0 : false}
                    onChange={(checked) => this.handleChange(item, tag, checked)}
                  >
                    {tag}
                  </CheckableTag>
                );
              })}
            </div>
          );
        })}
      </div>
    );
  }
  handleChange(filter: FilterKeywords, tag: string, checked: boolean): void {
    const { selected } = this.state;
    const current = (selected[filter.title] ? selected[filter.title] : []) as [];
    const nextSelectedTags = filter.multiple
      ? checked
        ? [...current, tag]
        : current?.filter((t) => t !== tag)
      : checked
        ? [tag]
        : [tag];
    const newSelect = { ...selected };
    newSelect[filter.title] = nextSelectedTags;
    // console.log('You are interested in: ', nextSelectedTags);
    const value = this.setStateType(nextSelectedTags[0]);

    this.props.setType(value);
    this.setState({ selected: newSelect });

  }
  private setStateType(stName: string) {
    switch (stName) {
      case "全部":
        return -1;
      case "禁用":
        return 0;
      case "上线":
        return 1;
      case "待提交审核":
        return 2;
      case "审核中":
        return 3;
      case "审核失败":
        return 4;
      case "审核成功等待上线":
        return 5;
      default: return -1;

    }
  }
}

export default KeywordFilterSpecial;
